<template>
	<ul class="tabs problem-tabs" v-if="problem">
		<li class="tab problem-tab" v-for="item in problems" :class="item.class"
			@click="toProblemPage(item.id)">
			<span class="fa fa-check c-green" v-if="item.solvedByUser"></span>
			{{ item.identifierString }}
		</li>
	</ul>

	<problem :problem="problem"></problem>

	<hr>

	<submit-code :submit="submit" :close="close" :run-id="runId" :message="message"
		v-if="contest && 4 != contest.status"></submit-code>
</template>


<script type="module">
import problem from '@/components/Problem.vue';
import submitCode from '@/components/SubmitCode.vue';
// import router from '@/router';

import { ContestService, ContestProblemService, ProblemService, Router } from '@/common/common.object'


function processActiveProblem(problems, problem) {
	if (!problems || !problem) return;


	let identifier = problem.identifier;
	let found = false;

	for (let item of problems) {
		if (!found && item.identifier === identifier) {
			item.class = "active";
			found = true;
		} else {
			item.class = null;
		}
	}
}

export default {
	inject: ['contest'],
	data() {
		return {
			problem: null,
			contestProblems: null,
			solvedProblems: null,

			runId: null,
			message: null,
		};
	},
	components: {
		problem,
		submitCode,
	},
	created() {
		const identifier = this.$route.params.identifier;

		ContestService.getProblems(this.contest.id, ['id', 'identifier'])
			.then(result => {
				this.contestProblems = ProblemService.processesWithoutFreeze(result);
			}).then(() => this.loadContestProblem(identifier));


		ContestService.getSolvedProblems(this.contest.id)
			.then(result => {
				this.solvedProblems = result.solvedList || null;
			}).catch(error => { });
	},
	watch: {
		'$route.params.identifier'(identifier) {
			this.loadContestProblem(identifier);
		},
	},
	computed: {
		problems() {
			if (!this.contestProblems
				|| !this.solvedProblems) {
				return this.contestProblems;
			}


			for (let item of this.contestProblems) {
				// item.id 为string，而id为int，暂且如此
				for (let id of this.solvedProblems) {
					if (id == item.id) {
						item.solvedByUserService = true;
					}
				}
			}

			return this.contestProblems;
		},
		title() {
			return;
		},
	},
	methods: {
		loadContestProblem(identifier) {
			console.log("loadContestProblem: ", identifier);

			return ContestProblemService.get(this.contest.id, identifier).then(result => {
				processActiveProblem(this.problems, result);

				this.problem = ProblemService.process(result);
			}).then(() => {
				const title = `${this.problem.finalTitle} - ${this.contest.name}`;

				this.$changeTitle(title);
			});
		},
		toProblemPage(identifier) {
			this.$toPage(Router.page.contest.problem(this.contest.id, identifier));
		},
		submit(lang, code) {
			if (lang && code) {
				ContestProblemService.submit(this.contest.id, IDENTIFIER, lang, code);
			}
		},
		close() {
			this.runId = null;

			return false;
		},
	}
}


</script>

<style scope>
.tabs {
	padding-left: 0;
}

hr {
	margin-top: 20px;
	margin-bottom: 20px;
	border: 0;
	border-top: -1px solid #eee;
}
</style>